<template>
  <div class="addposiman">
    <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
      <el-row :gutter="15">
        <el-col :span="24">
          <el-row :gutter="15">
            <el-col :span="24">
              <el-form-item label="区域信息：">
                <el-select
                  v-model="treeNameStr"
                  placeholder="请选择"
                  clearable
                  disabled
                  :style="{width: '100%'}"
                >
                  <el-option
                    :value="formData.area"
                    :style="{height: '120px',overflow:'auto'}"
                    v-if="isShow"
                  >
                    <template>
                      <el-tree
                        :data="allData"
                        :props="defaultProps2"
                        @node-click="handleNodeClick"
                        icon-class="custom"
                      ></el-tree>
                    </template>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="24">
          <el-row :gutter="15">
            <el-col :span="24">
              <el-form-item label="设备名称：" prop="devicename">
                <el-input
                  v-model="formData.devicename"
                  placeholder="请输入"
                  clearable
                  :style="{width: '100%'}"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="24">
          <el-row :gutter="15">
            <el-col :span="24">
              <el-form-item label="设备类型：" prop="devicetype">
                <el-select
                  v-model="formData.devicetype"
                  placeholder="请选择"
                  clearable
                  :style="{width: '100%'}"
                >
                  <el-option
                    v-for="item in sblxObj"
                    :key="item.SSSBLX"
                    :label="item.SSSBLX"
                    :value="item.SSSBLX"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="24">
          <el-row :gutter="15">
            <el-col :span="24">
              <el-form-item label="点位名称：" prop="pointname">
                <el-input
                  v-model="formData.pointname"
                  placeholder="请输入"
                  clearable
                  :style="{width: '100%'}"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="24">
          <el-row :gutter="15">
            <el-col :span="24">
              <el-form-item label="巡检类型：" prop="inspectiontype">
                <el-select
                  v-model="formData.inspectiontype"
                  placeholder="请选择"
                  clearable
                  :style="{width: '100%'}"
                >
                  <el-option
                    v-for="item in inspectiontypeOption"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="24">
          <el-row :gutter="15">
            <el-col :span="24">
              <div class="addposiman-btn">
                <el-button class="table-query" type="primary" @click="submitForm">保存</el-button>
                <el-button class="table-query" type="primary" @click="clsoe">关闭</el-button>
              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script lang="ts">
import { Component, Vue ,Prop} from "vue-property-decorator";
import { JointInspectionModule } from "@/store/modules/JointInspection";
@Component
export default class addposiman extends Vue {
   @Prop() treeObj!:any
   @Prop() treeName!:any
   @Prop() tableSelect!:any
   @Prop() bzIdNma!:any
   @Prop() inspectiontypeOption!:any
  formData = {
    area: "", //区域信息
    devicename: "", //设备名称
    devicetype: "", //设备类型
    pointname: "", //点位名称
    inspectiontype: "", //巡检类型
  };
   //设备类型下拉
   sblxObj=[]
  get treeNameStr(){
    var treeNames=''
    if (!this.treeName) {
     treeNames= JointInspectionModule.getAreaList[0].name
    }else{
      treeNames=this.treeName
    }
    return treeNames
  }
  //控制下拉树图
  isShow=true;
  areaOption = [{ name: "1", code: "1" }];
  // //下拉
  // allData = [
  //   { label: "1", code: "1", children: [{ label: "2", code: "2" }] },
  //   { label: "2", code: "2", children: [{ label: "2", code: "2" }] },
  // ];
  // defaultProops={
  //   children:'children',
  //   label:'label'
  // }
  public defaultProps2: any = {
    label: "name",
    children: "children",
  };
  rules = {
    // devicename: [{ required: true, message: "请输入内容", trigger: "blur" }],
    // devicetype: [{ required: true, message: "请输入内容", trigger: "change" }],
    // pointname: [{ required: true, message: "请输入内容", trigger: "blur" }],
    // inspectiontype: [
    //   { required: true, message: "请输入内容", trigger: "change" },
    // ],
  };

  $refs!: {
    elForm: any;
  };
  handleNodeClick(data) {
    // console.log("data", data);
    this.formData.area = data.name;
  }
  get allData(){
    // console.log(JointInspectionModule.getAreaList);
    
    return JointInspectionModule.getAreaList
  }
  //关闭
  clsoe() {
    this.$emit("close");
  }
  submitForm() {
    this.$refs.elForm.validate((valid: any) => {
      if (!valid) {
        this.$message({
          type: "warning",
          message: "表单校验不通过",
        });
        return;
      }
      
      // TODO 提交表单
      let form = {
        id:this.tableSelect[0].ID,
        ssds:'',
        ssdsmc:'',
        sbmc: this.formData.devicename || "",
        sblx: this.formData.devicetype || "",
        dwmc: this.formData.pointname || "",
        realdatatype: "",
      };
      let resultArr =  this.inspectiontypeOption.filter((item) => {
          return item.code === this.formData.inspectiontype
        });
        // console.log(resultArr);
        form.realdatatype=resultArr[0].name
      let formObj:any={}
      
      if (!this.treeObj.ssds) {
        let ctiyObj:any={}
        ctiyObj.ssds=JointInspectionModule.getAreaList[0].code;
        ctiyObj.ssdsmc=JointInspectionModule.getAreaList[0].name;
        ctiyObj.whbzid=JointInspectionModule.getAreaList[0].whbzid;
        ctiyObj.whbzmc=JointInspectionModule.getAreaList[0].whbzmc;
        // console.log(JointInspectionModule.getAreaList);
        
        // console.log(ctiyObj);
        
        formObj=Object.assign(form,ctiyObj);
      }else{
        formObj=Object.assign(form,this.treeObj,this.bzIdNma);
       }
      //  console.log(formObj);
      (this as any).$services
        .addOrUpdate({ data: formObj ,method:'post'})
        .then((result: any) => {
          // console.log(result);
             if (result.code === 200) {
            this.$message({
              type: "success",
              message: `${result.message}`,
            });
          } else {
            this.$message({
              type: "error",
              message: "操作失败!",
            });
          }
          // console.log(123456);
          
           this.$emit("inithandle");
        })
        .catch((err: object) => {
          console.log(err);
        });
     
      // console.log(this.formData);
          // console.log(this.treeObj);
      // this.$emit("close");
    });
  }
    //设备类型下拉
  initSblx(){
(this as any).$services
            .getAddTemplateSblx({ data: {} })
            .then((result: any) => {
              // console.log(result);
              this.sblxObj=result.data
            })
            .catch((err: object) => {
              console.log(err);
            });
  }

  mounted() {
    // console.log(this.inspectiontypeOption);
    
    // this.initGetXjlx();
    this.initSblx()
    this.formData.devicename=this.tableSelect[0].SBMC ||''
    this.formData.devicetype=this.tableSelect[0].SBLX ||'' 
    this.formData.pointname=this.tableSelect[0].DWMC ||''
    
     let resultArr =  this.inspectiontypeOption.filter((item) => {
          return item.name === this.tableSelect[0].REALDATATYPE
        });
    this.formData.inspectiontype=resultArr[0].code||''
    // console.log(this.formData.inspectiontype);
    
    //所属第一级的id name
    // console.log( JointInspectionModule.getAreaList,12);
  }
}
</script>

<style lang="scss" scoped>
.addposiman {
  width: 100%;
  // height: 400px;
  &-btn {
    width: 100%;
    height: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
<style lang="scss" >
.lhxj_xjdwgl {
  height: 150px;
  overflow: auto;
}
</style>
